<template>
  <div>
    <cc-tree-grid :columns="columns" :tree-column="treeColumn" :tree-key="treeKey" :data="data" :expanded-keys="expandedKeys" ref="myTreeGrid">
      <el-table-column>
        <div slot-scope="{row}">
          <el-button type="primary" @click="editRow(row)">编辑</el-button>
          <el-button type="danger" @click="removeRow(row)">删除</el-button>
          <el-button type="danger" @click="inserRow(row)">插入</el-button>
          <el-button>查看</el-button>
          {{ row }}
        </div>
      </el-table-column>
    </cc-tree-grid>
    <el-button-group>
      <el-button @click="getValues" type="primary">获取值</el-button>
      <el-button @click="getExpanedKeys" type="primary">获取展开的行</el-button>
      <el-button @click="inserRow({id:0})" type="primary">插入值</el-button>
    </el-button-group>
  </div>
</template>

<script>
import ccTreeGrid from '@/components/ccTreeGrid'
export default {
  name: 'example-treegrid',
  data() {
    return {
      columns: [{
        label: '英文名',
        prop: "en"
      }, {
        label: '中文名',
        prop: "cn"
      }],
      treeColumn: 'en',
      treeKey: 'id',
      data: [],
      expandedKeys: []
    }
  },
  methods: {
    editRow(row) {
      const ref = this.$refs['myTreeGrid'];
      ref.updateRow(row[this.treeKey], { ...row, cn: '汉语' });
    },
    removeRow(row) {
      const ref = this.$refs['myTreeGrid'];
      ref.removeRow(row[this.treeKey]);
    },
    inserRow(row) {
      const ref = this.$refs['myTreeGrid'];
      ref.insertRow(row[this.treeKey], {
        en: 'say my name',
        cn: '说出我的名字',
        id: (Math.random() + '').replace('0.', '')
      }, 5);
    },

    getValues() {
      const ref = this.$refs['myTreeGrid'];
      console.log(ref.values());
    },

    getExpanedKeys() {
      const ref = this.$refs['myTreeGrid'];
      console.log(ref.getExpandedKeys());
    }
  },
  components: {
    ccTreeGrid
  },
  mounted() {

    //this.expandedKeys = ['1'];
    this.data = [{
      id: "1",
      en: "En1",
      cn: "中文1",
      children: [{
        id: '1-1',
        en: "En1-1",
        cn: "中1-1",
      },
      {
        id: '1-2',
        en: "En1-2",
        cn: "中1-2",
        children: [{
          id: '1-2-1',
          en: "En1-2-1",
          cn: "中1-2-1",
          children: [{
            id: '1-2-1-1',
            en: "En1-2-1-1",
            cn: "中1-2-1-1",
          }]
        }]
      }]
    }, {
      id: "2",
      en: "lalala",
      cn: "德玛西亚",
      children: [{
        id: "2-1",
        en: "la",
        cn: "德",
      }]
    }];
  }
}
</script>

<style>

</style>
